<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试网学生端成绩查询页面</title>
	<link rel="stylesheet" href="./css/score.css" />
</head>
<body>
    <!-- 顶部导航盒子 -->
    <div class="nav-box">
        <div class="logo">
            <img src="./img/examicon.svg" alt="Logo">
            <h1>在线考试网后台管理</h1>
        </div>
    </div>

    <!-- 内容盒子 -->
    <div class="content-box">
        <div class="breadcrumb">
            当前位置：考生成绩查询 >>
        </div>
        <a href="./studentindex.html" class="back-btn">返回首页</a>
    </div>

    <div class="main-content">
        <div class="search-bar">
            <div class="title">成绩查询</div>
            <div class="right-section">
                <input type="text" placeholder="搜索课程" class="search-input">
                <select class="semester-select">
                    <option value="2023-1">2023-2024年第一学期</option>
                    <option value="2022-2">2022-2023年第二学期</option>
                    <option value="2022-1">2022-2023年第一学期</option>
                    <option value="2021-2">2021-2022年第二学期</option>
                </select>
            </div>
        </div>

        <div class="grade-table">
            <table>
                <thead>
                    <tr>
                        <th>课程编号</th>
                        <th>课程名称</th>
                        <th>学分</th>
                        <th>成绩</th>
                        <th>绩点</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>MATH101</td>
                        <td>高等数学</td>
                        <td>4.0</td>
                        <td>92</td>
                        <td>4.0</td>
                        <td class="status">已通过</td>
                    </tr>
                    <tr>
                        <td>PHYS102</td>
                        <td>英语</td>
                        <td>3.0</td>
                        <td>85</td>
                        <td>3.5</td>
                        <td class="status">已通过</td>
                    </tr>
                    <tr>
                        <td>COMP203</td>
                        <td>数据结构</td>
                        <td>3.5</td>
                        <td>88</td>
                        <td>3.7</td>
                        <td class="status">已通过</td>
                    </tr>
                    <tr>
                        <td>ENG104</td>
                        <td>JavaEE</td>
                        <td>2.0</td>
                        <td>78</td>
                        <td>2.8</td>
                        <td class="status">已通过</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="stats-title">成绩统计</div>
        <div class="stats-container">
            <div class="stat-card blue">
                <div class="stat-title">平均学分绩点</div>
                <div class="stat-value">3.50</div>
            </div>
            <div class="stat-card green">
                <div class="stat-title">已修学分</div>
                <div class="stat-value">12.5</div>
            </div>
            <div class="stat-card purple">
                <div class="stat-title">已通过课程</div>
                <div class="stat-value">4</div>
            </div>
            <div class="stat-card orange">
                <div class="stat-title">未通过课程</div>
                <div class="stat-value">0</div>
            </div>
        </div>
    </div>
	<script src="js/score.js"></script>

</body>
</html>
